<template>
  <div class="user-card">
    <div class="card_bg">
      <img :src="imgUrl"
           alt
           width="100%" />
    </div>
    <div class="card_bar">
      <van-button class="btn j-change-card" color="linear-gradient(-90deg,rgba(255,139,2,1),rgba(255,173,0,1))" round block text="保存图片" @click="saveImg()"></van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { wxUserApiUserCard } from '@/api/small/common'
import small from '@/smallapp/small'
export default Vue.extend({
    data() {
        return {
            imgUrl: ''
        }
    },
    mounted() {
        this.wxUserApiUserCardFun()
    },
    methods: {
        wxUserApiUserCardFun() {
            wxUserApiUserCard().then(res => {
                if (res.status == 1) {
                    this.imgUrl = res.data.filename
                } else {
                    this.$Error(res.msg)
                }
            })
        },

        saveImg () {
            small.saveImage(this.imgUrl)
        }
    }
})
</script>

<style lang="scss">
    .user-card{
        .card_bg{
            padding:20px;
            img{
                display:inline;
            }
        }
        .card_bar {
            width: 100%;
            position: fixed;
            bottom: 0;
            z-index: 1000;
            height: 96px;
            padding:10px 24px;
            border-radius:20px;
            background:#fff;
            .btn{
                width: 98%;
                height:76px;
                font-size:28px;
            }
        }
    }
</style>